<template>
  <el-menu>
    <template v-for="menuitem in Items">
      <el-menu-item
        :index="menuitem.Id.toString()"
        v-if="menuitem.Items.length==0"
        :key="menuitem.Id"
      >
        <span slot="title">{{menuitem.Title}}</span>
      </el-menu-item>
      <el-submenu v-if="menuitem.Items.length>0" :index="menuitem.Id.toString()" :key="menuitem.Id">
        <template slot="title">
          <router-link :to="menuitem.Url">{{menuitem.Title}}</router-link>
        </template>
        <el-menu-item v-for="item in menuitem.Items" :index="item.Id.toString()" :key="item.Id">
          <router-link slot="title" :to="item.Url">{{item.Title}}</router-link>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script lang="ts">
import { Vue, Component, Prop, Provide } from 'vue-property-decorator';
/** 菜单项 */
class MenuItem {
  /** 名称 */
  public Title: string = '';
  /** 链接地址 */
  public Url: string = '';
  /** 标识 */
  public Id: string = '';
  /** 子链接 */
  public Items: MenuItem[] = [];
}
@Component
export default class extends Vue {
  Items: MenuItem[] = [];
  async created() {
    await this.getMenuItems();
  }
  async getMenuItems() {
    let response = await this.$http.get({ url: '/Api/Common/' });
    this.Items = response.data;
  }
}
</script>
